<template>
  <div class="Recommend">
    <div class="title">猜你喜欢</div>
    <ul class="item">
      <router-link tag="li"  class="item-list" v-for="item of list" :key="item.id" :to="'/detail/'+item.id">
        <div class="item-warp">
          <img :src="item.imgUrl" alt="">
        </div>
        <div class="item-text">
          <p class="item-tit" v-html="item.title"></p>
          <p class="item-dex" v-html="item.desc"></p>
        </div>
      </router-link>
    </ul>
  </div>
</template>
<script>
  export default {
    name: 'HomeRecommend',
    props: {
      list: Array
    }
  }

</script>
<style lang="stylus" scoped>
  .Recommend
    background: #fff
    margin-top: .2rem
    .title
      line-height: 0.94rem
      text-indent: 0.4rem
      font-size: .30rem
    .item
      width: 100%
      padding: 0 0.2rem
      box-sizing border-box
      .item-list
        padding: 0.15rem 0
        overflow: hidden
        border-bottom: 1px solid #f5f5f5
        display: flex
        /*padding-bottom: 0.1rem*/
        box-sizing: border-box
        .item-text
          float: left
          margin-left: 0.2rem
          .item-tit
            font-size: 0.36rem
            margin-top: 0.22rem
          .item-dex
            width: 100%
            font-size: 0.26rem
            margin-top: 0.22rem
            color: #999
        .item-warp
          width: 2rem
          height: 2rem
          overflow: hidden
          float: left
          & img
            width: 100%
</style>
